Responsive and Personalized Web Layouts with Integer Programming

Over the past decade, responsive web design (RWD) has become the de facto standard for adapting web pages to a wide range of devices used for browsing. While RWD has improved the usability of web pages, it is not without drawbacks and limitations: designers and developers must manually design the web layouts for multiple screen sizes and implement associated adaptation rules, and its "one responsive design fits all"approach lacks support for personalization. This paper presents a novel approach for automated generation of responsive and personalized web layouts. Given an existing web page design and preferences related to design objectives, our integer programming -based optimizer generates a consistent set of web designs. Where relevant data is available, these can be further automatically personalized for the user and browsing device. The paper includes presentation of techniques for runtime adaptation of the designs generated into a fully responsive grid layout for web browsing. Results from our ratings-based online studies with end users (N = 86) and designers (N = 64) show that the proposed approach can automatically create high-quality responsive web layouts for a variety of real-world websites.Peer reviewe

Käyttöliittymäasettelun optimointi tyyliohjeiden mukaan

Designing and maintaining consistent graphical user interfaces (GUIs) across different products can improve product usability by making it easy to transfer learning from one system to another. GUI consistency is usually pursued by using standard GUI components and developing layout guidelines for using them. However, developing and following layout guidelines is challenging, because it is easy for guidelines to be ambiguous, conflicting, too many, or simply poorly communicated. Designers can also often forget, misunderstand, or misapply guidelines. Fixing misapplied guidelines, or updating an old GUI to new guidelines can also require considerable manual work. This thesis presents Design Mentor, a tool for optimising GUI layouts according to design system layout guidelines while minimising semantic changes to the input layout. This is achieved through constraint-based optimisation using Mixed-Integer Linear Programming (MILP). Prior work in automated layout generation has largerly focused on generating diverse alternative layouts in the early stages of the design process. Design Mentor differs from prior work by supporting the final stages of GUI design, providing robust integration with existing tools, and inferring high-level constraints from the input layout itself. The author demonstrates how Design Mentor is able to enforce design system guidelines to a layout in real-time during a design process while providing a high degree of control to the designer over the semantic aspects of the layout. Interviews with potential users suggest that this approach to layout optimisation can also support design exploration as well, by providing a polished preview of the current design draft.Graafisten käyttöliittymien yhtenäistäminen voi parantaa digitaalisten tuotteiden käytettävyyttä, sillä käyttäjä voi hyödyntää aiemmin oppimaansa vaihtaessaan järjestelmästä toiseen. Tyypillisin keino yhtenäisten käyttöliittymien suunnitteluun on hyödyntää vakioituja käyttöliittymäkomponentteja ja kehittää tyyliohjeita näiden komponenttien asetteluun. Tyyliohjeiden seuraaminen on kuitenkin haastavaa, sillä ohjeet saattavat helposti olla epäselviä, ristiriitaisia, liian laajoja tai huonosti kommunikoituja. Suunnittelijat saattavat usein unohtaa osan ohjeista sekä ymmärtää tai soveltaa niitä väärin. Virheiden korjaaminen tai vanhojen käyttöliittymien päivittäminen uusien ohjeiden mukaiseksi edellyttää usein myös paljon työtä. Tämä diplomityö esittelee Design Mentor -työkalun, joka soveltaa kokonaislukuoptimointia graafisten käyttöliittymien optimointiin tyyliohjeiden mukaisiksi minimoiden semanttiset muutokset käyttöliittymien asetteluun. Aiempi tutkimus käyttöliittymien asettelun automatisoinnissa on keskittynyt lähinnä vaihtoehtoisten asettelujen tuottamiseen suunnitteluprosessin alkuvaiheissa. Design Mentor eroaa aiemmista ratkaisuista keskittymällä suunnitteluprosessin loppuvaiheeseen, tukemalla olemassa olevia käyttöliittymien suunnittelutyökaluja sekä päättelemällä korkean tason optimointirajoitteita annetusta käyttöliittymästä itsestään. Diplomityö osoittaa, että Design Mentor kykenee optimoimaan käyttöliittymiä tyyliohjeiden mukaiseksi reaaliajassa suunnitteluprosessin aikana siten, että käyttäjä säilyttää hallinnan käyttöliittymäasettelun semanttisissa valinnoissa, kuten komponenttien järjestyksessä ja hierarkiassa. Toteutettujen käyttäjähaastattelujen perusteella on aihetta myös uskoa, että Design Mentor voi tukea käyttäjien luovuutta nopeuttamalla erilaisten käyttöliittymäasettelujen kokeilua

Fast Design Space Rendering of Scatterplots

The design space of scatterplots consists of a number of parameters such as marker size and shape, image width and aspect ratio, and opacity. Different parameters yield different visual impressions of the scatterplot. Perceptual optimization of scatterplots means finding the best design parameters to support a given visualization task. This requires rendering thousands of design variations. We describe an image-based method for rendering scatterplots, which is tailored to this scenario: it enables quick updates of the design by re-using previously calculated intermediate results, and is independent of the data set size. Our approach outperforms the classic method of rendering scatterplots, i.e., drawing each marker individually onto an image, and can therefore dramatically speed up the perceptual optimization of scatterplots. We provide an open-source implementation and an online service for our method.Peer reviewe

Interactive Layout Transfer

During the design of graphical user interfaces (GUIs), one typical objective is to ensure compliance with pertinent style guides, ongoing design practices, and design systems. However, designing compliant layouts is challenging, time-consuming, and can distract creative thinking in design. This paper presents a method for interactive layout transfer, where the layout of a source design – typically an initial rough working draft – is transferred automatically using a selected reference/template layout while complying with relevant guidelines. Our integer programming (IP) method extends previous work in two ways: first, by showing how to transform a rough draft into the final target layout using a reference template and, second, by extending IP-based approaches to adhere to guidelines. We demonstrate how to integrate the method into a real-time interactive GUI sketching tool. Evaluation results are presented from a case study and from an online experiment where the perceived quality of layouts was assessed.Peer reviewe